<template>
  <div class="detail">
    <!--1. 顶部导航栏 -->
    <van-nav-bar fixed :border=false title="户型详情" @click-left="onClickLeft" @click-right="showShare = true">
      <!-- 1.顶部导航栏插槽 -->
      <template #left>
        <van-icon name="arrow-left" color="black" />
      </template>
      <template #right>
        <img src="../assets/detail/share.png" width="15px">
      </template>
    </van-nav-bar>
    <!-- 1.1导航栏分享功能 -->
    <van-share-sheet v-model="showShare" :options="options" />
    <!-- 内容区域开始 -->
    <div class="content">
      <!-- 222222.tab切换轮播图片 -->
      <div class="swipeBox">
        <!-- 提升功能  嵌套轮播 -->
        <van-swipe @change="onChange" ref="swipe" :loop="false">
          <van-swipe-item v-for="(image, index) in String(this.Dobj.boyu_image).split(',').slice(0,4)" :key="index">
            <img :src="image" width="100%" @click="jumpToPhoto">
          </van-swipe-item>
        </van-swipe>
        <ul class="tabnav">
          <li class="onStyle" @click="click(1)" id="1">VR</li>
          <li @click="click(2)" id="2">视频</li>
          <li @click="click(3)" id="3">户型图</li>
          <li @click="click(4)" id="4">其它</li>
          <hr id="hr" width="8px" color="orange">
        </ul>
      </div>
      <!-- 舒适小开间开始 -->
      <div class="smBay">
        <br>
        <h3 v-text="String(Dobj.boyu_title).split('·')[0]"></h3>
        <p>
          <span v-text="Dobj.boyu_area+`㎡`"></span>
          <span v-text="Dobj.boyu_houseType+Dobj.boyu_area+`㎡`"></span>
        </p>
        <br>
        <p>
          <van-icon name="location" /> &nbsp;&nbsp;&nbsp;&nbsp;
          <strong v-text="String(Dobj.boyu_title).split('·')[1]"></strong>
          <router-link :to="{path:'/mendian',query:{hid:Dobj.boyu_menid}}" class="ckmd">查看门店</router-link>
        </p>
      </div>
      <!-- 户型亮点 -->
      <div class="star">
        <h3>户型亮点</h3>
        <div v-html="Dobj.boyu_mendian+shenglue"></div>
        <div v-show="shouqi" v-html="Dobj.boyu_introduce"></div>
        <div>
          <span @click="searchMore" v-text="val"></span>
        </div>
      </div>
      <!--周边配套和交通 -->
      <div>
        <h3>周边配套和交通 <a href="javascript:;" @click="showPopup" class="ckjs">查看介绍 &gt;</a></h3>
        <div>
          <!-- 周边配套和交通功能 查看介绍 -->
          <van-popup v-model="showZB" position="bottom" :style="{ height:'597px'}" popup-close-icon-size="8px">
            <!-- 内容 -->
            <div class="popup_content">
              <!-- 内容头部盒子 -->
              <div class="contentHeader">
                <h3><span @click="closePopup">×</span> 周边介绍</h3>
              </div>
              <!-- 内容区域盒子 -->
              <div class="contentCenter" v-html="Dobj.boyu_jieshao"></div>
              <!-- 内容底部盒子 -->
              <div class="contentFoot">
                <div class="button" @click="closePopup">知道了</div>
              </div>
            </div>
          </van-popup>
        </div>
        <div>
          <router-link to="/">
            <img src="../assets/detail/map.jpg" width="100%">
          </router-link>
          <p>
            <van-icon name="location" /> &nbsp;&nbsp;&nbsp;&nbsp;
            <strong v-text="Dobj.boyu_address"></strong>
          </p>
        </div>
      </div>
      <!-- 配套设施 -->
      <div style="margin-top:30px">
        <h3 style="margin:0">配套设施 <a href="javascript:;" @click="showPopup" class="ckjs">更多 &gt;</a></h3>
        <van-grid :border="false" icon-size="23px" :column-num="5">
          <van-grid-item v-for="(value,index) of arrr.slice(0,5)" :key="index" :icon="value.img" :text="value.text" />
        </van-grid>
        <!-- 配套设施功能 更多 -->
        <van-popup v-model="showMore" position="bottom" :style="{ height:'383px'}" popup-close-icon-size="8px">
          <!-- 内容 -->
          <div class="popup_content">
            <!-- 内容头部盒子 -->
            <div class="contentHeader More">
              <h3 style="top:45%"><span @click="closePopup">×</span>配套设施</h3>
            </div>
            <!-- 内容盒子 -->
            <div class="contentCenter">
              <van-grid :border="false" icon-size="23px">
                <van-grid-item v-for="(value,index) of arrr" :key="index" :icon="value.img" :text="value.text" />
              </van-grid>
            </div>
            <!-- 内容底部盒子 -->
            <div class="contentFoot">
              <div class="button" @click="closePopup">知道了</div>
            </div>
          </div>
        </van-popup>
      </div>
    </div>
    <!-- 门店其它户型 -->
    <div class="huaxing">
      <!-- {path:'/others',query:{OtherObj:Other_obj}} -->
      <h3>门店其它户型 <router-link :to="{path:'/others',query:{Other_obj:JSON.stringify(Other_obj),tit:'门店其它户型'}}"
          class="ckjs">更多 &gt;</router-link>
      </h3>
      <!-- 划行代码区 -->
      <ul class="slide-box">
        <li class="slide-item" v-for="(item,index) in Other_obj.slice(0,4)" :key="index">
          <p class="img-items" @click="jumpToDetail(item.boyu_quid)">
            <img :src="item.boyu_qhphoto" width="100%">
          </p>
          <p class="title" v-text="item.boyu_qhintroduce"></p>
          <p class="price">
            <span v-text="item.boyu_qhprice"></span>
          </p>
          <p class="art">
            <span v-text="item.boyu_qarea"></span>
          </p>
        </li>
      </ul>
    </div>
    <!-- 底部菜单 -->
    <div class="foot">
      <div>
        <img @click="shoucan" :src="imgpath" height="12px">
        <p>收藏</p>
      </div>
      <div>
        <div @click="showPopupTel">
          <img src="../assets/detail/tel.png" height="12px">
          <p>电话咨询</p>
        </div>
        <div class="styleTel">
          <!-- 电话咨询功能 弹出电话 -->
          <van-popup v-model="showTel" position="bottom" :style="{ height:'138px'}">
            <!-- 内容部分 -->
            <div class="popup_content_Tel">
              <div>
                <span>
                  <van-icon name="phone" color="pink" size="28" />
                </span>
                呼叫 176 7453 5470
              </div>
              <div @click="closePopupTel">取消</div>
            </div>
          </van-popup>
        </div>
      </div>
      <router-link class="routerLink" to="/">在线预约</router-link>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        // axios接收数据
        Dobj: {},
        Other_obj: [],
        // 电话咨询功能 弹出电话
        showTel: false,
        //周边配套和交通功能 查看介绍
        showZB: false,
        // 配套设施功能 更多
        showMore: false,
        e_target: '',
        // 服务器数据
        arrr: [],
        //户型亮点是否收起,即是否显示内容div
        shenglue: "...",
        shouqi: false,
        val: "查看更多",
        // 收藏
        isLike: 0,
        imgpath: require('../assets/detail/like.png'),
        //1.1 分享功能栏
        showShare: false,
        options: [
          {
            name: '微信',
            icon: 'wechat',
          },
          {
            name: '微信朋友圈',
            icon: 'wechat-moments',
          },
        ],
      };
    },
    methods: {
      // 电话咨询功能 弹出
      showPopupTel() {
        this.showTel = true;
      },
      closePopupTel() {
        this.showTel = false;
      },
      // 配套设施功能 更多 和 周边配套和交通功能 查看介绍共用方法
      showPopup(e) {
        //判断点击元素的内容，修改对应的控制是否弹出变量
        if (e.target.innerHTML == "更多 &gt;") {
          this.showMore = true;
          //获取点击元素内容,赋值给变量e_target
          this.e_target = e.target.innerHTML;
        }
        if (e.target.innerHTML == "查看介绍 &gt;") {
          this.showZB = true;
          //获取点击元素内容,赋值给变量e_target
          this.e_target = e.target.innerHTML;
        }
      },
      closePopup() {
        if (this.e_target == "更多 &gt;") {
          this.showMore = false;
        }
        if (this.e_target == "查看介绍 &gt;") {
          this.showZB = false;
        }
      },
      //户型亮点内容区域是否收起
      searchMore() {
        if (this.shouqi) {
          this.shenglue = '...';
          this.shouqi = false;
          this.val = "查看更多";
        } else {
          this.shenglue = ''
          this.shouqi = true;
          this.val = "收起";
        }
      },
      // 收藏
      shoucan() {
        // 修改样式
        if (this.isLike == 0) {
          this.imgpath = require('../assets/detail/likes.png');
          this.isLike = 1;
        } else {
          this.imgpath = require('../assets/detail/like.png'),
            this.isLike = 0;
        }
        //修改数据库是否收藏
        this.axios.get(
          '/like', { params: { boyu_hid: this.Dobj.boyu_hid, boyu_collect: this.isLike } }
        ).then((res) => {
          //console.log(res.data)
        })
      },
      //1.1 顶部导航栏返回从哪来返回去哪
      onClickLeft() {
        // 顶部导航栏返回从哪来返回去哪
        history.go(-1);
      },
      //22222222.轮播图
      onChange(index) {
        this.click(index + 1);
      },
      click(id) {
        let li1 = document.getElementById('1');
        li1.className = "";
        let li2 = document.getElementById('2');
        li2.className = "";
        let li3 = document.getElementById('3');
        li3.className = "";
        let li4 = document.getElementById('4');
        li4.className = "";
        if (id < 5) {
          let li = document.getElementById(id);
          li.className = "onStyle";
        }
        if (id == 1) {
          let hr = document.getElementById('hr');
          hr.setAttribute('class', '');
        }
        if (id == 2) {
          let hr = document.getElementById('hr');
          hr.setAttribute('class', 'run2');
        }
        if (id == 3) {
          let hr = document.getElementById('hr');
          hr.setAttribute('class', 'run3');
        }
        if (id == 4) {
          let hr = document.getElementById('hr');
          hr.setAttribute('class', 'run4');
        }
        this.$refs.swipe.swipeTo(Number(id) - 1);
      },
      joinArrs(Dobj) {
        //数据库获取收藏，控制页面收藏显示
        this.isLike = Dobj.boyu_collect;
        if (this.isLike) {
          this.imgpath = require('../assets/detail/likes.png');
        } else {
          this.imgpath = require('../assets/detail/like.png');
        }

        //配套设施功能 更多——将服务器请求到的数据 变成数组操作
        let tubiaoArr = String(Dobj.boyu_tubiao).split(',');
        let biaotiArr = String(Dobj.boyu_biaoti).split(',');
        for (let i = 0; i < tubiaoArr.length; i++) {
          let data = {};
          data.id = i;
          data.img = tubiaoArr[i];
          data.text = biaotiArr[i];
          this.arrr.push(data);
        }
      },

      //3.门店其它户型，点击图片跳转到自身detail
      jumpToDetail(newHid) {
        this.$router.push({
          path: '/detail',
          // name:'detail',
          query: { hid: newHid }
        });
        history.go(0)
      },
      // 轮播图跳转到门店照片页面
      jumpToPhoto() {
        this.$router.push({
          path: '/photo',
          name: 'photo',
          query: {
            img: this.Dobj.boyu_image
          }
        })
      }
    },
    mounted() {
      // 1.从其他页面跳转至本页时，根据上个页面路由传参的id,发送 get /detail 请求获取数据
      this.axios.get("/detail", {
        params: {
          boyu_hid: this.$route.query.hid,
        }
      }).then((res) => {
        this.Dobj = res.data.results[0];//对象形式
        let imageArr = this.Dobj.boyu_image.split(',')[0]
        //调用joinArrs函数——将服务器数据 变为数组
        this.joinArrs(this.Dobj)
        //2.从其他页面跳转至本页时，get /detail提取到门店数据，根据门店数据向boyu_qhouse表获取同一门店其它户型数据
        let qstore = String(this.Dobj.boyu_title).split('·')[1];
        let quid = this.Dobj.boyu_hid;
        this.axios.get('/detail_other', {
          params: {
            boyu_qstore: qstore,
            boyu_quid: quid
          }
        }).then((res) => {
          this.Other_obj = res.data.results;
        })
      });
    },
  }
</script>
<style scoped>
  /* 内容区域统一样式 */
  .content {
    padding: 50px 15px 0;
  }

  p {
    font-size: 12px;
  }

  /* 22222222.轮播图 */
  /* 222222.点击时 */
  .onStyle {
    color: orange;
  }

  .tabnav hr {
    position: absolute;
    bottom: -5px;
    left: 19px;
    transition: all 0.3s ease;
  }

  .run2 {
    transform: translate(50px);
  }

  .run3 {
    transform: translate(110px);
  }

  .run4 {
    transform: translate(170px);
  }

  /* 22222222.未点击时 */
  .swipeBox {
    position: relative;
    width: 100%;
    height: 258px;
    margin: 0 auto;
    border-radius: 6px;
    overflow: hidden;
  }

  .tabnav {
    width: 94%;
    height: 30px;
    background-color: #fff;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    position: absolute;
    bottom: 0px;
    left: 3%;
    line-height: 30px;
    font-size: 12px;
    color: #666;
  }

  .tabnav li {
    float: left;
    padding: 3px 15px;
  }

  /* 22222222.轮播图结束 */
  /* 温馨舒适小开间 */
  .smBay span {
    padding-right: 20px;
    color: #666;
  }

  .smBay p {
    margin-top: -8px;
  }

  /* 户型亮点 */
  .star {
    margin-top: 30px;
  }

  .star div {
    font-size: 12px;
  }

  .star div:last-child {
    height: 25px;
  }

  .star span {
    color: orange;
    float: right;
  }

  /* 查看门店小链接 */
  .ckmd {
    font-size: 12px;
    color: #fff;
    background: linear-gradient(to right, #ff5300, #ff8917);
    padding: 5px 22px;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    float: right;
    margin-right: -15px;
  }

  /* 查看介绍小链接 */
  .ckjs {
    color: #888;
    font-size: 12px;
    float: right;
  }

  /* 配套设施功能 更多 和 周边介绍功能 查看介绍公用样式*/
  .van-grid-item__text {
    font-size: 14px !important;
    color: red;
  }

  .popup_content {
    padding: 0 15px;
    position: relative;
    height: 100%;
  }

  .popup_content .contentHeader {
    position: fixed;
    left: 0;
    bottom: 555px;
    width: 100%;
    height: 42px;
    line-height: 42px;
    background-color: #fff;
  }

  .popup_content .More {
    position: fixed;
    left: 0;
    bottom: 341px;
    z-index: 1;
  }

  .contentHeader span {
    position: absolute;
    left: 15px;
    top: 0px;
    font-size: 22px;
    font-weight: 400;
    color: #888;
  }

  .popup_content h3 {
    display: block;
    margin: 0px auto;
    text-align: center;
  }

  .popup_content .contentCenter {
    padding: 42px 0 80px 0;
  }

  .contentCenter img {
    width: 16px;
    height: 16px;
  }

  .popup_content .contentFoot {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #fff;
  }

  .popup_content .button {
    width: 90%;
    height: 50px;
    margin: 15px auto;
    background-color: orangered;
    border-radius: 5px;
    text-align: center;
    color: #fff;
    line-height: 50px;
  }

  /* 门店其它户型划行区域样式 */
  ul,
  li {
    list-style: none;
  }

  .slide-box {
    display: -webkit-box;
    overflow-x: auto;
    /*适应苹果*/
    -webkit-overflow-scrolling: touch;
  }

  /*隐藏掉滚动条*/
  .slide-box::-webkit-scrollbar {
    display: none;
  }

  .slide-box {
    padding: 0 15px;
  }

  .slide-box li:last-child {
    padding-right: 15px;
  }

  .slide-item {
    width: 47%;
    height: 310px;
    margin: 0 5px;
  }

  .huaxing h3 {
    padding: 0 15px;
  }

  .huaxing p {
    margin: 0;
  }

  .huaxing .title {
    font-weight: 700;
    margin-top: 8px;
    margin-bottom: 4px;
  }

  .huaxing .price span {
    color: orangered;
  }

  .huaxing .art {
    /* 字体太小无效 */
    font-size: 8px;
    color: #888;
  }

  .huaxing .img-items {
    width: 162px;
    height: 124px;
    border-radius: 6px;
    overflow: hidden;
  }

  /* 底部菜单 */
  .foot {
    position: fixed;
    bottom: 0px;
    left: 0px;
    /* 电话咨询功能 弹出 遮盖层盖不住顶部导航，它和底部菜单都固定定位了因此修改z-index */
    z-index: 1;
    display: block;
    width: 100%;
    height: 75px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0px 0px 15px #ccc;
    overflow: hidden;
    background-color: #fff;
  }

  .foot>div {
    float: left;
    margin: 10px 18px;
    text-align: center;
  }

  .foot p {
    margin: 0px;
    color: #888;
    font-size: 12px;
  }

  .foot .routerLink {
    text-align: center;
    display: inline-block;
    width: 58%;
    height: 38px;
    line-height: 40px;
    background: orangered;
    color: #fff;
    font-size: 12px;
    border-radius: 5px;
    position: absolute;
    top: 10px;
    right: 15px;
  }

  /* 底部电话咨询功能  */
  .popup_content_Tel div {
    height: 45px;
    line-height: 45px;
    font-size: 21px;
    color: blue;
    background-color: #fff;
    border-radius: 8px;
    margin: 10px 10px 0px 10px;
  }

  .popup_content_Tel div:first-child {
    position: relative;
  }

  .popup_content_Tel span {
    position: absolute;
    top: 7px;
    left: 32px;
  }

  /* 覆盖源代码 遮盖层样式-----------------------------------------失败 */
  /* .styleTel .van-overlay{
   background-color: yellow!important;
  } */
  .styleTel .van-popup {
    background-color: transparent;
  }

  .test {
    background-color: red;
  }
</style>